<template>
  <el-button :icon="Setting" circle text @click="onShow" />

  <el-dialog
    v-model="state.show"
    :title="'配置'"
    class="setting-content"
  >
    <div class="d-flex rounded">
      <el-menu :default-active="settings.active" class="rounded" style="width: 200px">
        <el-menu-item class="rounded" index="header" @click="()=>settings.active='header'">公司信息</el-menu-item>
        <el-menu-item class="rounded" index="applet" @click="()=>settings.active='applet'">小程序配置</el-menu-item>
        <el-menu-item class="rounded" index="general" @click="()=>settings.active='general'">公众号配置</el-menu-item>
        <el-menu-item class="rounded" index="samplePlace" @click="()=>settings.active='samplePlace'">抽样场所</el-menu-item>
        <el-menu-item class="rounded" index="varietySetting" @click="()=>settings.active='varietySetting'">品种配置</el-menu-item>
      </el-menu>
      <div class=" pa-6 fill-width">
        <el-form
          ref="formRef"
          :model="settings"
          :rules="rules"
          label-width="120px"
          status-icon
        >
          <div style="min-height: 400px">
            <Header v-if="settings.active==='header'" :form="settings.form" />
            <Applet v-if="settings.active==='applet'" :form="settings.form" />
            <General v-if="settings.active==='general'" :form="settings.form" />
            <SamplePlace v-if="settings.active==='samplePlace'" :form="settings.form" />
            <VarietySetting v-if="settings.active==='varietySetting'" :form="settings.form" />
          </div>

          <el-form-item class="mb-0">
            <div class="d-flex align-end justify-end fill-width">
              <el-button type="primary" @click="onSubmit">保存</el-button>
              <el-button @click="onClose">关闭</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { CompanyApi } from "~/api/system/company/company.api";
import { reactive, ref } from "vue";
import { Setting } from "@element-plus/icons-vue";
import { FormRules } from "element-plus";
import Header from "~/views/system/company/settting/Header.vue";
import Applet from "~/views/system/company/settting/Applet.vue";
import General from "~/views/system/company/settting/General.vue";
import SamplePlace from "~/views/system/company/settting/SamplePlace.vue";
import { SettingType } from "~/api/system/company/types";
import VarietySetting from "~/views/system/company/settting/VarietySetting.vue";

interface Props {
  api: CompanyApi;
}

const { api } = withDefaults(defineProps<Props>(), {});

let state = reactive({
  show: false,
});
const rules = reactive<FormRules>({
  name: [{ required: true, message: "请输入公司名称", trigger: "blur" }],
});
const formRef = ref();

let settings = reactive<{
  id: string,
  active: string,
  form: SettingType
}>({
  id: "",
  active: "header",
  form: {
    header: {
      title: "",
      logo: "",
    },
    applet: {
      appid: "",
      secret: "",
    },
    general: {
      appid: "",
      secret: "",
      token: "",
      aesKey: "",
    },
    samplePlace: [],
    varietySetting: [],
  },
});

async function onShow() {
  const data: any = await api.getSetting();
  settings.id = data.id as any;
  settings.form = data.settings as any;
  state.show = true;
}

function onClose() {
  state.show = false;
  settings.form = {
    header: {
      title: "",
      logo: "",
    },
    applet: {
      appid: "",
      secret: "",
    },
    general: {
      appid: "",
      secret: "",
      token: "",
      aesKey: "",
    },
    samplePlace: [],
    varietySetting: [],
  };
}

async function onSubmit() {
  const values = await formRef.value.validate();
  if (values) {
    api.updateSetting(settings.id, settings.form);
    state.show = false;
  }
}
</script>

<style lang="scss">
.setting-content {
  .el-dialog__body {
    padding: 0 !important;
  }

  .el-menu {
    border: none;
    padding: 8px;

    .el-menu-item {
      height: 38px;
      margin-bottom: 8px;
    }
  }

}
</style>
